<template>
	<view class="home">
		<view class="bg-ff bg-shadow padding-30 tag radius-40">
			<view class="tag_item" v-for="(item,index) in catelist" :key="index" @click="choseCate(item.id)">
				<view class="flex align-center flex-direction">
					<view :style="cate_id==item.id?'color:#000;':''">{{item.name}}</view>
					<view :style="cate_id==item.id?'background:#000;':''" class="tag_line"></view>
				</view>
			</view>
		</view>
		<view class="flex_lr margin-top-20">
			<view :style="sort=='latest'?'color:#000;':'color:#999;'" @click="choseSort('latest')">最新
			</view>
			<view :style="sort=='sales'?'color:#000;':'color:#999;'" @click="choseSort('sales')">销量 <image
					src="/static/board/laimg.png" class="laimg" mode=""></image>
			</view>
			<view :style="sort=='price'?'color:#000;':'color:#999;'" @click="choseSort('price')">价格<image
					src="/static/board/laimg.png" class="laimg" mode=""></image>
			</view>
		</view>
		<view class="flex justify-between flex-wrap margin-top-20">
			<view class="width-330 bg-ff radius-40 margin-bottom-40 bg-shadow" v-for="(item,index) in list" :key="index"
				@click="go('/pages/shop/detail?id='+item.id)">
				<image :src="item.image" mode="" class="gameimg"></image>
				<view class="padding-tb-20 padding-lr-30">
					<view class="text-cut-two line-30 height-60 text-28 text-bold">{{item.name}}</view>
					<view class="flex align-center margin-top-15">
						<view class="text-28 flex-one text-red">￥{{item.price}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cate_id: '',
				sort: 'latest', //sales 销量 latest最新 price价格
				catelist: [],
				list: [],
			}
		},
		onReady() {
			this.rq.getData('MemProducts/category').then(res => {
				if (res.code == 1) {
					this.catelist = res.data
					this.cate_id = this.catelist[0].id || ''
					this.loadList(1)
				}
			})
		},
		methods: {
			loadList(isFirstPage) {
				var that = this
				that.rq.getList('MemProducts/products_list', {
					type_id: this.cate_id,
					sort: this.sort
				}, {
					that: that,
					first_page: isFirstPage,
				})
			},
			choseCate(id) {
				this.cate_id = id
				this.loadList(1)
			},
			choseSort(sort) {
				this.sort = sort
				this.loadList(1)
			},
		},
		onReachBottom() {
			this.loadList(0)
		}
	}
</script>

<style>
	.tag {
		width: 100%;
		white-space: nowrap;
		overflow-x: scroll;
		overflow-y: hidden;
	}

	.tag_item {
		margin-right: 20rpx;
		white-space: nowrap;
		display: inline-block;
		font-size: 30rpx;
		color: #999;
	}

	.tag_line {
		width: 50rpx;
		height: 6rpx;
		border-radius: 60rpx;
		margin-top: 5rpx;
	}

	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
		padding: 40rpx 30rpx;
	}

	.cateimg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.xingimg {
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: -5rpx;
		right: -25rpx;
	}

	.lineimg {
		width: 76rpx;
		height: 10rpx;
	}

	.gameimg {
		width: 330rpx;
		height: 278rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	.laimg {
		width: 24rpx;
		height: 24rpx;
	}
</style>